<template>
  <div class="rules-manage">
    <div class="search">
      <div class="title">
        <el-button type="text" class="btn-return" @click="$emit('onClose')">{{ '<返回' }}</el-button>
        规范要求配置管理
      </div>
    </div>
    <div class="content">
      <el-table :data="dataList">
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="规范名称" prop="name" />
        <el-table-column label="操作" width="160" class-name="small-padding fixed-width">
          <template slot-scope="scope" v-if="!!scope">
            <el-button size="mini" type="text" :icon="icon" @click="handleEdit(scope.row)" v-hasPermi="getPermi(scope.row.code)">
              {{ readonly ? '查看' : '编辑' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <component :is="activeName" :visible.sync="editShow" :currentRule="currentRule" :readonly="readonly" />
  </div>
</template>
<script>
import StructureSetting from './StructureSetting'
import FontStyleSetting from './FontStyleSetting'

export default {
  components: { StructureSetting, FontStyleSetting },
  props: {
    currentRule: {
      type: Object,
      default: () => ({})
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    icon() {
      return this.readonly ? 'el-icon-view' : 'el-icon-edit'
    }
  },
  data() {
    return {
      activeName: 'StructureSetting',
      dataList: [
        { name: '内容结构', code: 'StructureSetting' },
        { name: '文件字体字号', code: 'FontStyleSetting' }
      ],
      editShow: false
    }
  },
  methods: {
    getPermi(code) {
      if (this.readonly) {
        return ["*:*:*"]
      }
      if (code==='StructureSetting') {
        return ['editor:standardRuleStructure:edit']
      }
      return ['editor:standardRuleFont:edit']
    },
    handleEdit(row) {
      this.activeName = row.code
      this.editShow = true
    }
  }
}
</script>
<style scoped>
.rules-manage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  flex-direction: column;
}
.search {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: none;
  padding: 0 24px;
}
.search .title {
  font-size: 15px;
  font-weight: bold;
}
.search .btns {
  display: flex;
  align-items: center;
}
.search .search-btn {
  margin: 0 5px 0 15px;
}
.content {
  padding: 15px 24px 30px;
}
.btn-return {
  margin-right: 15px;
}
</style>
